<template>
  <div class="singer">
    <div class="singer-name">
      <img :src="this.singer.picUrl" alt="歌手图片" />
      <span>{{ this.singer.name }}</span>
    </div>
    <ListTitle>歌手简介</ListTitle>
    <div class="brief">
      <p>{{ this.singer.briefDesc }}</p>
    </div>
    <ListTitle>热门歌曲</ListTitle>
    <SongList :songlist="showSong" :shownumber="true" @play="$emit('play', $event)" v-if="showSong.length>0"></SongList>
    <MusicLoading v-else></MusicLoading>
    <div v-show="showSong.length>0" class="more" @click="loadMore" >{{page>=10?"没有更多了":"点击加载更多"}}</div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import SongList from '@/components/SongList.vue'
import MusicLoading from '@/components/MusicLoading.vue'
export default {
  components: { ListTitle,SongList,MusicLoading },
  props: ["pid"],
  data() {
    return {
      singer: [],
      Mvsong: [],
      page:1
    };
  },
  created() {
    this.getSinger();
    this.getMvsong();
    window.addEventListener("scroll", this.scrollbar);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollbar); //离开当前路由移除scroll事件
  },
  methods: {
    async getSinger() {
      let re = await this.axios.get("/artists?id=" + this.pid);
      this.singer = re.artist;
      console.log("歌手id", this.singer);
    },
    async getMvsong() {
      let re = await this.axios.get("/artist/top/song?id=" + this.pid);
      let Mvsong = re.songs;
      this.Mvsong = Mvsong.map((song) => {
        song.song = {
          artists: song.ar,
          privilege: song.privilege,
          album: song.al,
          alias: song.alia,
        };
        return song;
      });
      console.log(this.Mvsong)
    },
    // 点击下一页
    loadMore(){
      if(this.page>=10){
        return;
      }
      this.page++;//下一页
    },
    scrollbar() {
      let el = document.documentElement || document.body; //获取滚动条滚动距离兼容写法
      let top = el.scrollTop + el.clientHeight; //底部距离顶部的距离
      let moretop = this.$refs.more.offsetTop; //more加载条的距离顶部的距离 offsetTop
      console.log("moretop===>",moretop);
      if (top >= moretop + 20) {
        this.loadMore();
      }
    },
  },
   computed:{
    showSong(){
      return this.Mvsong.slice(0,10*this.page);
    }
  },
};
</script>

<style lang="less" scoped>
.singer {
  .singer-name {
    position: relative;
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    border: 1px solid black;
    & > img {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    & > span {
      position: absolute;
      top: 250px;
      left: 20px;
      color: white;
      font-size: 16px;
      font-family: 宋体;
    }
  }
  .brief {
    height: 300px;
    overflow: auto;
    background: #fff;
    padding: 0 16px 18px;
    & > p {
      color: #666;
    }
  }
  .more{
    text-align: center;
    line-height: 40px;
    font-size:13px;
    color:#666;
  }
}
</style>